<template>
    <view class="page-box">
        <view class="list">
            <view class="box row bothSide verCenter" @click="chooseImageChange">
                <view class="title">头像</view>
                <view class="right-bar row verCenter">
                    <image :src="info.wx_photo_base64 || 'https://img.ichunt.com/images/ichunt/202406/27/30ced652cba4ec22f58a8544ebc428f5.png'" mode="aspectFill" class="pic"></image>
                    <text class="iconfont icon-youjiantou"></text>
                </view>
            </view>
            <view class="box row bothSide verCenter" @click="updateChange(1)">
                <view class="title">姓名</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.name}}</text>
                    <text class="iconfont icon-youjiantou"></text>
                </view>
            </view>
            <view class="box row bothSide verCenter" @click="updateChange(2)">
                <view class="title">微信号</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.wx_account}}</text>
                    <text class="iconfont icon-youjiantou"></text>
                </view>
            </view>
            <view class="box row bothSide verCenter" @click="updateChange(3)">
                <view class="title">邮箱</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.email}}</text>
                    <text class="iconfont icon-youjiantou"></text>
                </view>
            </view>
            <view class="box row bothSide verCenter" @click="updateChange(4)">
                <view class="title">地址</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.address}}</text>
                    <text class="iconfont icon-youjiantou"></text>
                </view>
            </view>
            <view class="box row bothSide verCenter" @click="updateChange(5)">
                <view class="title">修改密码</view>
                <view class="right-bar row verCenter">
                    <text class="iconfont icon-youjiantou"></text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">微信昵称</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.wx_nickname}}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">手机</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.tel}}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">等级</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.level_val }}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">公司</view>
                <view class="right-bar row verCenter">
                    <text class="tt row">{{info.company}}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">最新下单时间</view>
                <view class="right-bar row verCenter">
                    <text class="tt row" style="width: auto;">{{info.recently_order_time}}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">注册时间</view>
                <view class="right-bar row verCenter">
                    <text class="tt row" style="width: auto;">{{info.create_time}}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">激活时间</view>
                <view class="right-bar row verCenter">
                    <text class="tt row" style="width: auto;">{{info.create_time }}</text>
                </view>
            </view>
            <view class="box row bothSide verCenter">
                <view class="title">到期时间</view>
                <view class="right-bar row verCenter">
                    <text class="tt row" style="width: auto;">{{info.expire_time}}</text>
                </view>
            </view>
        </view>
        <view class="btn row rowCenter verCenter" @click="exit">退出登录</view>
        <!-- 修改弹窗 -->
        <uni-popup ref="popup" background-color="#ffffff" border-radius="20rpx 20rpx 0 0">
            <view class="popup-content">
                <template v-if="update_status == 1">
                    <view class="title row rowCenter verCenter">修改姓名</view>
                    <view class="input-box">
                        <input type="text" placeholder="请输入姓名" v-model="form.name" class="uni-input" />
                    </view>
                </template>
                <template v-else-if="update_status == 2">
                    <view class="title row rowCenter verCenter">设置微信号</view>
                    <view class="input-box">
                        <input type="text" placeholder="请设置微信号" v-model="form.wx_account" class="uni-input" />
                    </view>
                </template>
                <template v-else-if="update_status == 3">
                    <view class="title row rowCenter verCenter">修改邮箱</view>
                    <view class="input-box">
                        <input type="text" placeholder="请输入邮箱" v-model="form.email" class="uni-input" />
                    </view>
                </template>
                <template v-else-if="update_status == 4">
                    <view class="title row rowCenter verCenter">修改地址</view>
                    <view class="input-box">
                        <input type="text" placeholder="请输入地址" v-model="form.address" class="uni-input" />
                    </view>
                </template>
                <template v-else-if="update_status == 5">
                    <view class="title row rowCenter verCenter">修改密码</view>
                    <view class="input-box" style="margin-bottom: 24rpx;">
                        <input type="password" placeholder="请输入8～20位的新密码" v-model="password" class="uni-input" />
                    </view>
                    <view class="input-box">
                        <input type="password" placeholder="请再次输入新密码" v-model="repassword" class="uni-input" />
                    </view>
                </template>
                <view class="popup-btn row bothSide verCenter">
                    <view class="btn-canel row rowCenter verCenter" @click="close">取消</view>
                    <view class="btn-ok row rowCenter verCenter" @click="updatePwd">确认</view>
                </view>
            </view>
        </uni-popup>
        <watermark :company="company" :name="name" :phoneLastDigits="phoneLastDigits" />
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    import { delCookie } from '@/util/util.js';
    export default {
        data() {
            return {
                name: '',
                company: '',
                phoneLastDigits: '',
                update_status: 1,
                password: '',
                repassword: '',
                form: {
                    wx_photo: '',
                    wx_account: '',
                    address: '',
                    name: '',
                    email: ''
                },
                info: {}
            };
        },
        onLoad() {

        },
        onShow() {
            this.getData();
        },
        methods: {
            getData() {
                this.request(API.getUserInfo, 'get', {}, true).then(res => {
                    if (res.code === 0) {
                        this.info = res.data;
                        this.form.wx_photo = res.data.wx_photo_base64;
                        this.form.name = res.data.name; //姓名
                        this.form.wx_account = res.data.wx_account; //微信号
                        this.form.email = res.data.email; //邮箱
                        this.form.address = res.data.address; //地址

                        //水印需要的字段
                        this.name = res.data.name;
                        this.company = res.data.company;
                        // 截取电话号码的后4位
                        this.phoneLastDigits = res.data.tel.slice(-4);
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 修改用户信息
             */
            updateUserInfo() {
                if (this.update_status == 1) {
                    var params = {
                        name: this.form.name
                    }
                }
                if (this.update_status == 2) {
                    var params = {
                        wx_account: this.form.wx_account
                    }
                }
                if (this.update_status == 3) {
                    var params = {
                        email: this.form.email
                    }
                }
                if (this.update_status == 4) {
                    var params = {
                        address: this.form.address
                    }
                }
                if (this.update_status == 6) {
                    var params = {
                        wx_photo: this.form.wx_photo
                    }
                }
                this.request(API.updateUserInfo, 'POST', params, true).then(res => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'success'
                        });
                        setTimeout(() => {
                            this.getData();
                            this.close();
                        }, 2000)
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 修改密码
             */
            updatePwd() {
                if (this.update_status == 1) {
                    if (!this.form.name) {
                        uni.showToast({
                            title: '请输入姓名',
                            icon: 'none'
                        });
                        return false;
                    }
                }
                if (this.update_status == 2) {
                    if (!this.form.wx_account) {
                        uni.showToast({
                            title: '请设置微信号',
                            icon: 'none'
                        });
                        return false;
                    }
                }
                if (this.update_status == 3) {
                    if (!this.form.email) {
                        uni.showToast({
                            title: '请输入邮箱',
                            icon: 'none'
                        });
                        return false;
                    }
                }
                if (this.update_status == 4) {
                    if (!this.form.address) {
                        uni.showToast({
                            title: '请输入地址',
                            icon: 'none'
                        });
                        return false;
                    }
                }
                if (this.update_status == 5) {
                    if (this.password.length < 8 || this.password.length > 20) {
                        uni.showToast({
                            title: '请输入8～20位的新密码',
                            icon: 'none'
                        });
                        return false;
                    }
                    if (this.password != this.repassword) {
                        uni.showToast({
                            title: '两次密码输入不一致',
                            icon: 'none'
                        });
                        return false;
                    }
                    this.request(API.updateUserInfo, 'POST', { password: this.password }, true).then(res => {
                        if (res.code === 0) {
                            uni.showToast({
                                title: '修改密码成功',
                                icon: 'success'
                            });
                            setTimeout(() => {
                                this.getData();
                                this.close();
                            }, 2000)
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
                    return false;
                }
                this.updateUserInfo();
            },
            /**
             * 更新
             */
            updateChange(index) {
                this.update_status = index;
                this.open();
            },
            open() {
                this.$refs.popup.open('bottom');
            },
            close() {
                this.$refs.popup.close();
            },
            /**
             * 上传图片
             */
            chooseImageChange() {
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: chooseImageRes => {
                        console.log('选择图片成功：', chooseImageRes);

                        // 显示loading
                        uni.showLoading({
                            title: '上传中...'
                        });

                        // 获取选择的图片路径数组
                        const tempFilePaths = chooseImageRes.tempFilePaths;

                        //上传到服务器
                        uni.uploadFile({
                            url: API.uploadImage,
                            filePath: tempFilePaths[0],
                            name: 'file',
                            formData: {
                                'source': 'appUser'
                            },
                            success: uploadFileRes => {
                                console.log('服务器上传图片成功：', uploadFileRes);
                                uni.hideLoading();
                                let data = JSON.parse(uploadFileRes.data);
                                if (data.code === 0) {
                                    this.info.wx_photo = data.data; //更新微信头像
                                    this.form.wx_photo = data.data;
                                    this.update_status = 6;
                                    this.updateUserInfo(6);
                                    this.$forceUpdate();
                                } else {
                                    uni.showToast({
                                        title: data.msg,
                                        icon: 'none'
                                    });
                                }
                            },
                            fail: () => {
                                uni.hideLoading();
                                uni.showToast({
                                    title: '上传图片失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                });
            },
            /**
             * 退出系统
             */
            exit() {
                uni.showModal({
                    title: '',
                    content: '确定要退出系统吗？',
                    success: res => {
                        if (res.confirm) {
                            this.request(API.userLogout, 'POST', {}, true).then(res => {
                                if (res.code === 0) {
                                    delCookie('app_user_id');
                                    uni.switchTab({
                                        url: '/pages/index/index'
                                    });
                                } else {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: 'none'
                                    });
                                }
                            });
                        } else if (res.cancel) {
                            // 用户点击取消操作
                            console.log('用户点击取消');
                        }
                    }
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/mine/setting.scss';

    .popup-content {
        padding: 40rpx;

        .title {
            margin-bottom: 50rpx;
            font-weight: 600;
            color: #1c1c1c;
            font-size: 28rpx;
        }

        .input-box {
            background: #f6f6f6;
            height: 96rpx;
            border-radius: 18rpx;

            .uni-input {
                height: 96rpx;
                font-size: 26rpx;
                color: #333;
                border-radius: 18rpx;
                padding-left: 24rpx;
            }
        }

        .popup-btn {
            margin-top: 40rpx;
            height: 96rpx;

            .btn-canel {
                width: 240rpx;
                height: 96rpx;
                background: #f4f4f4;
                color: #424242;
                border-radius: 50rpx;
                font-size: 28rpx;
            }

            .btn-ok {
                width: 400rpx;
                height: 96rpx;
                background: #566aff;
                color: #fff;
                border-radius: 50rpx;
                font-size: 28rpx;
            }
        }
    }
</style>